<template>
 <transition name="list-fade">
 	<div class="playlist" v-show="showFlag" @click="hide">
 	<div class="list-wrapper" @click.stop>
 	<div class="list-header">
 		<h1 class="flex middle">
 		 <i class="yellow iconfont  f30" :class="iconMode" @click="changeMode"></i>
 		 <span class="cell-main xl ml10 hui">{{modeText}}</span>
 		 <i class="iconfont icon-lajixiang xl hui" @click="showConfirm"></i>
 		</h1>
 	</div>
 	<scroll :refreshDelay='refreshDelay' class="list-content" :data="sequenceList" ref="content">
 	<transition-group name="list" tag='ul'>
 		<li :key='item.id' ref='listItem' @click="selectItem(item,index)" class="listitem flex middle" v-for="(item,index) in sequenceList">
 		<i class="iconfont playnow yellow max" :class='getCurIndex(item)'></i>
 		<span class="cell-main xl ml5 hui">{{item.name}}</span>
 		<i  @click.stop="toggleFavorite(item)" :class="getFavoriteIcon(item)" class="yellow iconfont  playIcon"></i>
 		<i class="yellow iconfont icon-close2 m ml5" @click.stop="delectOne(item)"></i>
 		</li>
 	</transition-group>
 	 	</scroll>
 	<div class="list-operate">
 		<div class="add flex middle" @click="addSong">
 			<i class="iconfont icon-jia mr5"></i>
 			<span class="m">添加歌曲到队列</span>
 		</div>
 	</div>
 	<div class="list-close" @click="hide">
 		关闭
 	</div>
 	</div>
 	<confirm  @confirm="confirmClear" ref="confirm" text="是否清空播放列表" confirmBtn="清空"></confirm>
 	<add-song ref=addSong></add-song>
 	</div>
 </transition>
</template>

<script type="text/ecmascript-6">
import {mapActions} from 'vuex';
import scroll from 'base/scroll/scroll';
import addSong from 'components/add-song/add-song'
import confirm from 'base/confirm/confirm'
import {playMode} from 'common/js/config'
import {playerMixin} from 'common/js/mixin'
export default{
  name:'',
  mixins:[playerMixin],
  data(){
   return{
   	showFlag:false,
    refreshDelay:100
  }
},
computed:{
modeText(){
	return this.mode===playMode.sequence?'顺序播放' :this.mode===playMode.random?'随机播放':'单曲循环'
}
},
methods:{
	show(){
		this.showFlag=true;
		setTimeout(()=>{
		this.$refs.content.refresh();
		this.scrollToCurrent(this.currentSong)
	},20)
	},
	hide(){
		this.showFlag=false
	},
	addSong(){
		this.$refs.addSong.show()
	},
	getCurIndex(item){
		if(this.currentSong.id===item.id){
			return 'icon-toplay'
		}else{
			return ''
		}
	},
	selectItem(item,index){
		if(this.mode===playMode.random){
			index=this.playlist.findIndex((song)=>{
				return song.id===item.id
			})
		}
		this.setCurrentIndex(index)
		this.setPlayingState(true)
	},
	scrollToCurrent(current){
		const index=this.sequenceList.findIndex((song)=>{
			return current.id===song.id
		})
		this.$refs.content.scrollToElement(this.$refs.listItem[index],300)
	},
	delectOne(item){
		this.delectSong(item);
		if(!this.playlist.length){
		this.hide()
		}
	},
	showConfirm(){
		this.$refs.confirm.show()
	},
	confirmClear(){
		this.deleteSongList()
		this.hide()
	},
	...mapActions(['delectSong','deleteSongList'])
},
watch:{
	currentSong(newSong,oldSong){
		if(!this.showFlag||newSong.id===oldSong.id){
			return
		}
		this.scrollToCurrent(newSong)
	}
},

  components:{scroll,confirm,addSong}
}
</script>

<style rel="stylesheet" lang="less">
   .playlist{
   	position: fixed;
   	top: 0;
   	bottom: 0;
   	width: 100%;
   	z-index: 3;
   	background-color: rgba(0,0,0,0.3);
   	.list-wrapper{
   	position: absolute;
   	left: 0;
   	bottom: 0;
   	background-color: #333;
   	width: 100%;
   	}
   	.list-header{
    position: relative;
    padding: 20px 30px 10px 20px;
   	}
   	.listitem{
   	height: 40px;
    padding: 0 30px 0 20px;
   	}
   	.playIcon{
   		font-size: 24px;
   	}
   	.list-operate{
   	width: 150px;
    margin:10px auto;
   	}
   	.add{
    padding: 5px 16px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 100px;
    color: rgba(255,255,255,0.5);
   	}
   	.list-content{
   	    max-height: 240px;
    overflow: hidden;
   	}
   	.list-close{
    text-align: center;
    line-height: 50px;
    background: #222;
    font-size: 16px;
    color: rgba(255,255,255,0.5);
   	}
   	.f30{
   		font-size: 30px;
   	}
   	.playnow{
   		flex:0 0 20px;
   	}
   }
   .list-enter-active, .list-leave-active{
   	  transition: all 0.1s;
   }
   .list-enter, .list-leave-to{
   height: 0
   }

</style>
